<template>
	<list :show-scrollbar="false" :bounce="false" style="height: 500rpx;width: 520rpx;">
		<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
		<cell :ref="'item'+index" insert-animation="default" delete-animation="default" v-for="(item,index) in gifts" :key="index"
		 class="flex pt-2 align-center">
			<view class="flex align-center rounded-circle justify-between" style="background-image: linear-gradient(to right,#bcabba,#65aaf0); ;width: 325rpx;">
				<view class="p">
					<image style="width: 70rpx;height: 70rpx;" :src="item.avatar||defaultAvatar" mode=""></image>
				</view>
				<view class="flex-1 flex flex-column justify-center">
					<text class="font text-white">{{item.username}}</text>
					<text class="font-sm text-white">{{item.gift_name}}</text>
				</view>
				<view class="p">
					<image style="width: 70rpx;height: 70rpx;" class="rounded-circle" :src="item.gift_image" mode=""></image>
				</view>
			</view>
			<text class="text-warning ml-1 flex-1 font-lg">X {{item.num}}</text>
		</cell>
	</list>
	<!-- <view class="px-1">
		<scroll-view scroll-y="true" style="height: 500rpx;width: 520rpx;" >
			
			<view class="flex align-center">
				<view class="flex align-center rounded-circle justify-between" style="background-image: linear-gradient(to right,#bcabba,#65aaf0); ;width: 325rpx;">
					<view class="p">
						<image style="width: 70rpx;height: 70rpx;" src="/static/tabbar/min.png" mode=""></image>
					</view>
					<view class="flex-1 flex flex-column justify-center">
						<text class="font text-white">昵称</text>
						<text class="font-sm text-white">描述</text>
					</view>
					<view class="p">
						<image style="width: 70rpx;height: 70rpx;" src="/static/gift/2.png" mode=""></image>
					</view>
				</view>
				<text class="text-warning ml-1 flex-1 font-lg">X1</text>
			</view>
		</scroll-view>
	</view> -->
</template>

<script>
	const dom = weex.requireModule('dom')
	export default {
		data() {
			return {
				defaultAvatar: '/static/tabbar/min.png',
				gifts: []
			};
		},
		created() {
		},
		methods: {
			send(gift) {
				this.gifts.push(gift)
				this.toBottom()
				this.autoHide()
			},
			// 置于底部
			toBottom() {
				this.$nextTick(() => {
					let index = this.gifts.length - 1
					let ref = 'item' + index
					if (this.$refs[ref]) {
						dom.scrollToElement(this.$refs[ref][0], {})
					}
				})
			},
			// 自动消失
			autoHide() {
				if (this.gifts.length) {
					let timer = setTimeout(() => {
						this.gifts.splice(0, 1)
					}, 5000)
				}
			}
		}
	}
</script>

<style>

</style>
